//实现轮播图
new Swiper("#s1",{
    loop:true, // 循环播放
    autoplay:true, // 自动播放
    // 如果需要分页器
    pagination:{
      el: '.swiper-pagination',
    },
     // 如果需要前进后退按钮
     navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
})

//商品刷新功能
create_table = (arr) =>{
  $(".content-box")[0].innerHTML = "";
  let str = "";
  for( let i = 0;i < arr.length;i++ ){
          //获取商品的名称、商品的价格、商品的存储路径
          let o_name = arr[i].pro_name;
          let o_price = arr[i].pro_price;
          let o_imgpath = arr[i].pro_imgpath;
          let o_id = arr[i].id;
        //   console.log(o_name);
        //   console.log(o_price);
        //   console.log(o_imgpath);

          str = `<div>
                        <div><a href=""><img src="${o_imgpath}" alt=""></a></div>
                        <div>
                            <a href="">
                                <div>${o_name}</div>
                                <div>${o_price}</div>
                                <input type="button" value="立即购买" name="buy">
                            </a>
                            <a href=""><input type="button" value="收藏" name="store" id = ${o_id}></a>
                        </div>
                  </div>`;
                  $(".content-box")[0].innerHTML += str;
  }
}


//刷新页面
//创建xhr对象
 let xhr = new XMLHttpRequest();

 //实现open方法
 xhr.open( "get","./api/get_prodata.php",true );

 //发送请求
 xhr.send();

 //设置监听状态
 xhr.onreadystatechange = function(){
     if( xhr.readyState === 4 && xhr.status === 200 ){
         let arr = JSON.parse( xhr.responseText );
         console.log( arr );
        //将后台数据存放在本地存储
        //将数据转换成json字符串
        let str = JSON.stringify(arr);
        
        //将数据存储到本地localStorage
        localStorage.setItem( "index",str );

         create_table( arr );
     }
 }

let a;
let obj = {arr1: []};
$("#content").addEventListener('click',function(e){
  e.preventDefault();        // 阻止button自动刷新
    if( e.target.tagName.toLowerCase() === "input" ){
         //为“立即购买”绑定点击事件
        if( e.target.name === "buy" ){
            //获取商品的名称
            a = e.target.parentNode.children[0].innerText;
            let _class = e.target.parentNode.parentNode.children[1].children[0].id;
            console.log( _class );
            
            //创建xhr对象
            let xhr = new XMLHttpRequest();

            //实现open方法
            xhr.open( "get","./api/buy_prodata.php?pro_name="+a,true );

            //发送请求
            xhr.send();

            //设置监听状态
            xhr.onreadystatechange = function(){
                if( xhr.readyState === 4 && xhr.status === 200 ){
                    console.log( xhr.responseText );
                }
            }

            //判断后台是否存在buy这个键名
            if( !localStorage.getItem("buy") ){
                localStorage.setItem("buy",JSON.stringify( obj ));              
            }

            //取出本地的存储信息
            let str2 = localStorage.getItem("buy");

            //将数据转换成json对象
            let arr2 = JSON.parse( str2 );

            //判断要放入的数据是否在本地存在
            if( !arr2.arr1.includes( _class ) ){
                //将收藏信息存放在本地localStorage
                arr2.arr1.push( _class );
                let str = JSON.stringify( arr2 );
                localStorage.setItem( "buy",str );
            }          
        }else{
            //为“收藏”绑定点击事件
            //获取商品的名称
            a = e.target.parentNode.parentNode.children[0].children[0].innerText;
            let _id = e.target.id;

            //判断后台是否存在store这个键名
            if( !localStorage.getItem("store") ){
                    localStorage.setItem("store",JSON.stringify( obj ));              
            }

            //取出本地的存储信息
            let str2 = localStorage.getItem("store");

            //将数据转换成json对象
            let arr2 = JSON.parse( str2 );

            //判断要放入的数据是否在本地存在
            if( !arr2.arr1.includes( _id ) ){
                //将收藏信息存放在本地localStorage
                arr2.arr1.push( _id );
                console.log( obj.arr1 );
                let str = JSON.stringify( arr2 );
                localStorage.setItem( "store",str );
            }        
        }
    }
});


//单击搜索按钮，实现跳转搜索页面
$("#btn2").onclick = function(){
    //将搜索数据放入到本地localstorage
    localStorage.setItem("search",$("#txt").value);
    window.location.href = "./search.html";
}


